<%@ include file="common.jspf" %>
<%@ include file="header.jspf" %>
  
<div class="container">
	<blockquote>
		<h3>English List</h3>
	</blockquote>
	
	<table class="table table-striped table-hover">
		<thead>
			<tr>
				<th>#</th>
				<th>kind</th>
				<th>title</th>
				<th>date</th>
			</tr>
		</thead>
		<tbody>
			<c:forEach var="i" items="${pagedList.list}">
				<tr onclick="location.href = '${urlDetail}?no=${i.no}';" style="cursor: hand;">
					<td><spring:eval expression="i.no"/></td>
					<td><spring:eval expression="i.kind"/></td>
					<td><spring:eval expression="i.title"/></td>
					<td><spring:eval expression="i.dateCreated"/></td>
				</tr>
			</c:forEach>
		</tbody>
	</table>	

	<c:set var ="pager" value="${pagedList.pager}"/>
    <%@ include file="/WEB-INF/include/pager.jspf" %>
    
    <form class="form-inline pull-right" role="form" style="margin-top: 20px;">
		<div style="display: inline-block; vertical-align: middle;">
			<div class="input-group" style="width: 200px;">
				<label class="sr-only" for="query">Query</label>
			    <input type="search" name="query" class="form-control" placeholder="Content" value="${param.query}"/>
			    <span class="input-group-btn">
		       		<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>&nbsp;</button>
		     	</span>
	     	</div>
     	</div>
		<button id="btnCreate" type="button" class="btn btn-default">
			<span class="glyphicon glyphicon-pencil"></span> Create
		</button>
	</form>
		    
</div><!-- container -->

<script>
	$(function() {
		initEvents();
	});
	
	function initEvents() {
		$('#btnCreate').click(create);
	}
</script>

<%@ include file="footer.jspf" %>